<template>
  <div class="collect">
    <nav class="nav">
      <ul>
        <li>
          <span @click="close" class="iconfont icon-left-arrow"></span>
        </li>
        <li>
          <span>我的收藏</span>
        </li>
        <li>
          <span>管理</span>
        </li>
      </ul>
    </nav>
    
    <gm-hot
      v-for="(item, index) in infoArr"
      @click="del()"
      :key="index"
      :title="item.title"
      :author="item.author"
      :text="item.text"
      :imgUrl="item.imgUrl"
      :index="index"
      @del="delIn"
    ></gm-hot>

    <div class="p">
      <p>双击书籍封面可以取消收藏</p>
    </div>

  </div>
</template>

<script>
import gmHot from "@/components/gmHot.vue";

export default {
  name: "Collect",
  data() {
    return {
      infoArr: [],
      closeCollect: false,
      delIndex: "",
    };
  },
  components: {
    gmHot,
  },
  methods: {
    close(){
        this.$emit("colseCollect",this.closeCollect)
    },
    delIn(index){
      this.infoArr.splice(index,1)
    }
  },
    mounted(){
      let dataArr = JSON.parse(localStorage.getItem("dataArr"));
      this.infoArr = dataArr;
    },
};
</script>

<style lang="scss" scoped>
.collect {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 999999;
  .nav {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    ul {
      width: 340px;
      display: flex;
      justify-content: space-between;
      li {
        span {
          font-size: 18px;
        }
      }
    }
  }
}
.p{
  position: absolute;
  bottom: 30px;
  width: 100%;
  p{
    width: 340px;
    font-size: 16px;
    color: #666;
    text-align: center;
    margin: 0 auto;
  }
}
</style>